<template>
	<view class="card_apply_step_warp">
		<Header left-path-type="navigateTo" leftPath="/pages/card_apply/card_apply" title="世界数字Web银行卡"/>
		<view class="apply_step_content">
			<!-- 卡信息 -->
			<view class="step_card_data">
				<view class="_content_item_warp">
					<up-image :src="cardData.cardImg" width="100%" bgColor="#f1f6ff00" mode="widthFix"></up-image>
					<view 
						class="_content_item_info" 
						:style="{
							'background': cardData.btnBgColor,
							'color': cardData.btnFontColor,
						}"
					>
						<!-- <text>￥</text> -->
						<text style="margin-left: 4rpx;">{{cardData.payAmount}}USDT</text>
						<text style="margin-left: 10rpx;font-size: 24rpx;">{{$t("common.apply.activation")}}</text>
					</view>
					<view
						class="_content_item_fee" 
						:style="{
							'color': cardData.btnBgColor,
						}"
					>
						{{$t("common.quota")}}{{cardData.bankCard ?cardData.bankCard.transLimit : 0}}
					</view>
				</view>
				<view class="step_card_amount">
					{{cardData.payAmount}}
					<text style="font-weight: 500;font-size: 26rpx;color: #999999;">USDT</text>
				</view>
				<view class="step_card_name">{{cardData.name}}</view>
				<view class="step_card_des">{{cardData.introduction}}</view>
			</view>
			<view class="step_card_data_fg"></view>
			<!-- 制卡信息 -->
			<view class="step_card_make">
				<view class="step_card_make_title_comm">{{$t("recharge.cardholder")}}</view>
				<view class="step_card_make_cardholder" @click="checkCardOwnersShow(true)">
					<view v-if="cardOwnersSel && Object.keys(cardOwnersSel).length !==0">{{cardOwnersSel.ownerFirstName}} {{cardOwnersSel.ownerLastName}}</view>
					<view v-else>{{$t("common.select")}}</view>
					<up-image src="/static/comm/right_h.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
				</view>
				<!-- <view class="step_card_make_title_comm">是否需要定制卡片</view>
				<view class="step_card_make_but_comm">
					<view :class="form.isCardholder ? 'step_card_make_but_item_comm step_card_make_but_item_sel_comm':'step_card_make_but_item_comm'" @click="checkCardholder(true)">需要定制</view>
					<view :class="!form.isCardholder ? 'step_card_make_but_item_comm step_card_make_but_item_sel_comm':'step_card_make_but_item_comm'" @click="checkCardholder(false)">不需要定制</view>
				</view>
				<view class="step_card_make_title_comm2">当前卡片样式</view>
				<view class="content_select_card_comm" @click="checkCardShow(true)">
					<view class="select_card_left">
						<up-image :src="selectCard.path" width="90" height="50" bgColor="#f1f6ff00" radius="6"></up-image>
						<view class="select_card_left_info">
							<view class="select_card_left_title">{{selectCard.name}}</view>
							<view class="select_card_left_value">{{selectCard.number}}</view>
						</view>
					</view>
					<up-image src="/static/comm/select.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="step_card_make_title_comm">是否需要实体卡</view>
				<view class="step_card_make_but_comm">
					<view :class="form.isPhysical ? 'step_card_make_but_item_comm step_card_make_but_item_sel_comm':'step_card_make_but_item_comm'" @click="checkPhysical(true)">需要</view>
					<view :class="!form.isPhysical ? 'step_card_make_but_item_comm step_card_make_but_item_sel_comm':'step_card_make_but_item_comm'" @click="checkPhysical(false)">不需要</view>
				</view> -->
				<view class="step_card_make_title_comm2" v-if="cardOwnersSel && Object.keys(cardOwnersSel).length !==0">{{$t("common.mailing.address")}}</view>
				<view class="step_card_make_address" v-if="cardOwnersSel && Object.keys(cardOwnersSel).length !==0">
					<view class="step_card_make_address_left">
						<view class="address_info">
							<view>{{cardOwnersSel.ownerAddrCountryName}} {{cardOwnersSel.ownerAddrCity}} {{cardOwnersSel.ownerAddress}}</view>
							<view>{{cardOwnersSel.ownerPostalcode}}</view>
						</view>
						<view style="margin-top: 6rpx;">
							<text class="address_name">{{cardOwnersSel.ownerFirstName}} {{cardOwnersSel.ownerLastName}}</text>
							<text class="address_phone">{{cardOwnersSel.ownerPhoneCode}} {{cardOwnersSel.ownerPhone}}</text>
						</view>
					</view>
					<!-- <up-image src="/static/comm/right_h.png" width="16" height="16" bgColor="#f1f6ff00"></up-image> -->
				</view>
				<view class="but_comm_warp" @click="applyOk">{{$t("recharge.commit")}}</view>
			</view>
		</view>
		<!-- 持卡人 -->
		<up-popup
			:show="cardOwnersShow" 
			:round="10" 
			mode="bottom" 
			@close="checkCardOwnersShow(false)" 
			@open="checkCardOwnersShow(true)"
			:customStyle="{
				'height':'900rpx',
				'padding':'30rpx 30rpx 60rpx',
			}"
		>
			<view class="select_card_owners_warp">
				<view 
					v-for="(item,index) in cardOwnersOption" 
					:key="item.id" 
					:class="cardOwnersSel.id === item.id? 'select_card_owners_item select_card_owners_sel':'select_card_owners_item'" 
					@click="checkCardOwners(item)" 
					:style="{
						'margin-right': (index+1)%2 ?'26rpx':'0rpx'
					}"
					v-if="cardOwnersOption && cardOwnersOption.length !==0"
				>
					<view class="address_info">
						<view>{{item.ownerAddrCountryName}} {{item.ownerAddrCity}} {{item.ownerAddress}}</view>
						<view>{{item.ownerPostalcode}}</view>
					</view>
					<view style="margin-top: 6rpx;">
						<text class="address_name">{{item.ownerFirstName}} {{item.ownerLastName}}</text>
						<text class="address_phone">{{item.ownerPhoneCode}} {{item.ownerPhone}}</text>
					</view>
				</view>
				<view v-else class="not_data_warp">
					<up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
					<view class="not_data_msg_warp">{{$t("mine.cardholder.not.content")}}</view>
					<view class="but_comm_warp but_comm_add_warp" @click="jumpOwners">{{$t('card.add.cardholder')}}</view>
				</view>
				<view class="but_comm_warp" @click="cardOwnersOk">{{$t("common.confirm")}}</view>
			</view>
		</up-popup>
		<!-- 选择卡片 -->
		<!-- <up-popup
			:show="cardShow" 
			:round="10" 
			mode="bottom" 
			@close="checkCardShow(false)" 
			@open="checkCardShow(true)"
			:customStyle="{
				'height':'900rpx',
				'padding':'30rpx 30rpx 60rpx',
			}"
		>
			<view class="select_card_warp">
				<view class="select_card_tag">
					<view :class="cardTagSel.id === item.id ? 'select_card_tag_item select_card_tag_item_sel':'select_card_tag_item'" v-for="item in cardTag" :key="item.id" @click="checkCardTag(item)">{{item.name}}</view>
				</view>
				<view class="select_card_image"> 
					<view 
						v-for="(item,index) in cardTagTempl" 
						:key="item.id" 
						:class="cardTagTemplSel.id === item.id? 'image_item image_item_sel_':'image_item'" 
						@click="checkCardTempl(item)" 
						:style="{
							'margin-right': (index+1)%2 ?'26rpx':'0rpx'
						}"
					>
						<up-image :src="item.path" width="100%" height="90" bgColor="#f1f6ff00" radius="10"></up-image>
						<view class="select_card_image_msg">{{item.name}}</view>
						<view class="image_item_sel_img" v-if="cardTagTemplSel.id === item.id">
							<up-image src="/static/comm/select_2.png" width="26" height="26" bgColor="#f1f6ff00"></up-image>
						</view>
					</view>
					<view class="but_comm_warp" @click="cardTemplOk">确认</view>
				</view>
			</view>
		</up-popup> -->
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { getCategoryDetail,applyCard,getCardOwners } from '@/api/card.js';
	
	export default {
		components:{Header},
		data() {
			return {
				cardData:{
					id:1,
					path:'/static/card/card_01_f.png',
					show:true,
					background:"#FFFFFF",
					color:"#054DC1",
				},
				form:{
					// isCardholder:true,// 是否需要定制
					// isPhysical:true,// 是否需要实体卡
					categoryId:0,// 卡类别id
					cardOwnerId:0,// 持卡人id
				},
				selectCard:{},
				// cardShow:false,
				// cardTag:[
				// 	{
				// 		id:1,
				// 		name:"商务类"
				// 	},{
				// 		id:2,
				// 		name:"星座类"
				// 	},{
				// 		id:3,
				// 		name:"主题类"
				// 	},
				// ],
				// cardTagSel:{
				// 	id:1,
				// 	name:"商务类"
				// },
				cardTagTempl:[],
				cardTagTemplSel:{},
				cardOwnersOption:[],// 持卡人列表
				cardOwnersShow:false,// 持卡人
				cardOwnersSel:{},
			};
		},
		mounted() {
		},
		onLoad(option) {
			const id = option.id;
			if(id && id !==0){
				this.form.categoryId = id;
				this.getCategoryDetailFun();
			}
		},
		methods: {
			/**
			 * 确认开卡
			 */
			async applyOk(){
				const form = this.form;
				if(!form.cardOwnerId){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t("recharge.card.cardholder"),
					});
					return false;
				}
				const resp = await applyCard(form);
				if(resp && resp.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: this.$t("card.apply.ok"),
					});
					setTimeout(()=>{
						uni.redirectTo({
							url:"/pages/card_apply_ok/card_apply_ok",
						})
					},1500)
				}
			},
			/**
			 * 查询卡片详情
			 */
			async getCategoryDetailFun(){
				const params={
					id:this.form.categoryId,
				}
				const resp = await getCategoryDetail(params);
				if(resp && resp.bizcode === 100){
					this.cardData = resp.data;
				}
			},
			// ============== 持卡人 start ===================================
			/**
			 * 查询持卡人
			 */
			async getCardOwnersFun(){
				const resp = await getCardOwners();
				if(resp && resp.bizcode === 100){
					this.cardOwnersOption = resp.data;
				}
			},
			checkCardOwnersShow(status){
				if(status){
					this.getCardOwnersFun();
				}
				this.cardOwnersShow=status;
			},
			checkCardOwners(item){
				this.cardOwnersSel = item;
			},
			cardOwnersOk(){
				this.form.cardOwnerId = this.cardOwnersSel.id;
				this.checkCardOwnersShow(false);
			},
			/**
			 * 跳转到持卡人
			 */
			jumpOwners(){
				uni.redirectTo({
					url:"/pages/cardholder_add/cardholder_add",
				})
			},
			// ============== 持卡人 end ===================================
			// checkPhysical(status){
			// 	this.form.isPhysical = status;
			// },
			// checkCardholder(status){
			// 	this.form.isCardholder = status;
			// },
			
			// checkCardShow(status){
			// 	this.cardShow = status;
			// },
			// checkCardTag(item){
			// 	this.cardTagSel = item;
			// },
			// checkCardTempl(item){
			// 	this.cardTagTemplSel = item;
			// },
			// cardTemplOk(){
			// 	this.selectCard = this.cardTagTemplSel;
			// 	this.checkCardShow(false);
			// },
			
			
		}
	}
</script>

<style lang="scss" scoped>
.card_apply_step_warp{
	height: calc(100vh - 0rpx);
	overflow: hidden;
	.apply_step_content{
		height: calc(100vh - 168rpx);
		overflow: auto;
	}
	.step_card_data{
		padding: 10rpx 30rpx 30rpx;
		position: relative;
		._content_item_warp{
			margin-bottom: 10rpx;
			position: relative;
		}
		._content_item_info{
			position: absolute;
			top: 76%;
			left: 52%;
			border-radius: 30rpx;
			padding: 14rpx 36rpx;
			font-weight: bold;
			font-size: 20rpx;
		}
		._content_item_fee{
			position: absolute;
			left: 28%;
			top: 80%;
			font-size: 24rpx;
		}
		.step_card_amount{
			font-weight: bold;
			font-size: 44rpx;
			color: #111111;
		}
		.step_card_name{
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
			margin-top: 10rpx;
		}
		.step_card_des{
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}
	
	.step_card_data_fg{
		width: 100%;
		height: 20rpx;
		background: #EEEEEE;
	}
	.step_card_make{
		padding: 30rpx 30rpx 60rpx;
		.step_card_make_title_comm{
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
		}
		.step_card_make_title_comm2{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		.step_card_make_but_comm{
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
			.step_card_make_but_item_comm{
				width: 48%;
				background: #F3F3F3;
				border-radius: 20rpx;
				text-align: center;
				padding: 30rpx 0;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
			}
			.step_card_make_but_item_sel_comm{
				background: #3D3D3D;
				color: #FFFFFF;
			}
		}
		.step_card_make_cardholder{
			background: #F3F3F3;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			margin: 20rpx 0;
			font-weight: 500;
			font-size: 36rpx;
			color: #999999;
		}
		.step_card_make_address{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #F3F3F3;
			border-radius: 30rpx;
			padding: 30rpx;
			margin-top: 20rpx;
		}
		.content_select_card_comm{
			margin-bottom: 20rpx;
		}
	}
	.but_comm_warp{
		margin-top: 200rpx;
	}
	.but_comm_add_warp{
		height: 50rpx;
	}
	
	.select_card_owners_warp{
		padding: 30rpx;
		.select_card_owners_item{
			border-radius: 20rpx;
			border: 1rpx solid #CCCCCC;
			padding: 20rpx;
			width: calc(100% - 40rpx);
			margin-bottom: 20rpx;
		}
		.select_card_owners_sel{
			border: 2rpx solid #265FFF;
		}
	}
	.address_info{
		font-weight: bold;
		font-size: 28rpx;
		color: #0E0E0E;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.address_name{
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: 6rpx;
	}
	.address_phone{
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		margin-left: 20rpx;
	}
	// .select_card_warp{
	// 	.select_card_tag{
	// 		display: flex;
	// 		margin-bottom: 20rpx;
	// 		.select_card_tag_item{
	// 			padding: 10rpx 30rpx;
	// 			margin-right: 30rpx;
	// 			text-align: center;
	// 			background: #E5E5E5;
	// 			border-radius: 10rpx;
	// 			font-weight: 500;
	// 			font-size: 28rpx;
	// 			color: #111111;
	// 		}
	// 		.select_card_tag_item_sel{
	// 			background: #3D3D3D;
	// 			color: #FFFFFF;
	// 		}
	// 	}
	// 	.select_card_image{
	// 		display: flex;
	// 		flex-wrap: wrap;
	// 		height: 830rpx;
	// 		overflow: auto;
	// 		.image_item{
	// 			width: 42%;
	// 			margin-top: 20rpx;
	// 			border-radius: 20rpx;
	// 			border: 1rpx solid #CCCCCC;
	// 			padding: 20rpx;
	// 			position: relative;
	// 			.image_item_sel_img{
	// 				position: absolute;
	// 				right: 0;
	// 				top: 0;
	// 			}
	// 		}
	// 		.image_item_ma{
				
	// 		}
	// 		.select_card_image_msg{
	// 			text-align: center;
	// 			font-weight: 500;
	// 			font-size: 26rpx;
	// 			color: #333333;
	// 			margin-top: 10rpx;
	// 		}
	// 		.image_item_sel_{
	// 			border: 2rpx solid #265FFF;
	// 		}
	// 	}
	// }
	
	
}

</style>
